<template>
  <div>
    <mt-tabbar v-model="selected" fixed>
      <mt-tab-item id="/cmsindex">
        <img slot="icon" src="../assets/tabbar/Home.png">
        首页
      </mt-tab-item>
      <mt-tab-item id="/order" @click.native="changeTab()">
        <img slot="icon" src="../assets/tabbar/tag.png">
        订单信息
      </mt-tab-item>
      <mt-tab-item id="/couponList" @click.native="changeTab()">
        <img slot="icon" src="../assets/tabbar/tag.png">
        优惠券
      </mt-tab-item>

      <div class="circleBox" @click="popupVisible = true">
        <div class="plusFill">+</div>
      </div>
      <mt-tab-item id="/address" @click.native="changeTab()">
        <img slot="icon" src="../assets/tabbar/calender.png">
        酒店
      </mt-tab-item>
      <mt-tab-item id="/address" @click.native="changeTab()">
        <img slot="icon" src="../assets/tabbar/calender.png">
        酒店
      </mt-tab-item>
      <mt-tab-item id="/myindex" @click.native="changeTab()">
        <img slot="icon" src="../assets/tabbar/my.png">
        我的
      </mt-tab-item>
    </mt-tabbar>




    <mt-popup v-model="popupVisible" style="width:80%;border-radius: 8px;padding-top: 15px;" position="center"
      popup-transition="popup-fade">
      <div class="closeBtn" @click="popupVisible = false">
        <u-icon size="18px" name="close"></u-icon>
      </div>
      <div class="u-flex u-row-between u-p-40">
        <div class="u-text-center u-p-20 u-m-lr-20 travel" @click="handleAddArticle('2')">
          <div class="u-font-40">
            <u-icon name="photo"></u-icon>
          </div>
          <div class="u-font-30">
            写游记
          </div>
        </div>
      </div>
    </mt-popup>
  </div>
</template>

<script>
import uIcon from '@/components/u-icon';
export default {
  components: {
    uIcon
  },
  data() {
    return {
      selected: '/',
      popupVisible: false
    }
  },
  created() {
    this.selected = this.$route.path;
  },
  methods: {
    changeTab() {
      if (this.selected == this.$route.path) {

        return
      } else {

        this.$router.push({ path: this.selected });
      }
    },
    handleAddArticle(type) {
      this.$router.push({ path: 'cmsadd?type=' + type })
    }
  }
}
</script>

<style lang="scss" scoped>
.circleBox {
  width: 60px;
  height: 60px;
  box-sizing: border-box;
  padding: 10px;
  background-color: #fafafa;
  border-radius: 50%;
  overflow: hidden;
  margin-top: -30px;

  .plusFill {
    height: 40px;
    background-color: #606266;
    border-radius: 50%;
    font-size: 28px;
    font-weight: bold;
    text-align: center;
    line-height: 40px;
    color: #fff;
  }
}

.strategy {
  border-radius: 20px;
  background-color: #027cb3;
  color: #FFFFFF;
}

.travel {
  border-radius: 20px;
  background-color: #b8741b;
  color: #FFFFFF;
}

.note {
  border-radius: 20px;
  background-color: #71b602;
  color: #FFFFFF;
}

.closeBtn {
  position: absolute;
  top: 8px;
  right: 8px;
}
</style>